<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/students/notices'}">学生</el-breadcrumb-item>
      <el-breadcrumb-item>过程文档管理</el-breadcrumb-item>
      <el-breadcrumb-item>提交开题报告</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域 -->
    <el-card> 
      <h1 style="margin:50px 100px" v-if="!showPage">您还为选择课题，请先选定课题!</h1>
      <el-card v-else>
        <!-- 折叠面板，显示课题信息 -->
        <el-collapse value="1" accordion class="collapse">
          <el-collapse-item :title="'题目 : ' + subject.name" name="1" >
          <div class="item">
            <span>题目申报时间: {{$moment(subject.declareTime).format('YYYY-MM-DD HH:mm:ss')}}</span> 
            <span class="right">题目类型: {{subject.type.label}}</span>
          </div>
          <div class="item">
            <span>题目来源: {{subject.source.label}}</span> 
            <span class="right">指导老师: {{teacher.name}}</span>
          </div>
          <div class="item">
            <span>导师联系电话: {{teacher.phone}}</span>
            <span class="right">教师职称: {{teacher.job}} </span> 
          </div>
          <div class="item">
            <span>导师联系邮箱: {{teacher.email}}</span> 
          </div> 
          <div class="item">
            <span>题目简介: {{subject.introduce}}</span> 
          </div> 
        </el-collapse-item>
        </el-collapse>
        <h1 v-if="deadline.openReport" style="margin:30px 30%; color:red">开题报告提交截止时间: {{$moment(deadline.openReport).format('YYYY-MM-DD HH:mm:ss')}}</h1>
        <el-form :model="report" ref="reportFormRef" :rules="reportFormRules" label-position="top" class="report" style="margin-top:20px">
          <el-form-item label="一、选题的依据及意义" prop="basis">
            <el-input class="input" v-model="report.basis"  type="textarea" :rows="5" :readonly="report.status > 3"></el-input>
          </el-form-item>
          <el-form-item label="二、国内外研究现状及发展趋势(含文献综述)" prop="trend">
            <el-input class="input" v-model="report.trend"  type="textarea" :rows="5" :readonly="report.status > 3"></el-input>
          </el-form-item>
          <el-form-item label="三、本课题研究内容" prop="content">
            <el-input class="input" v-model="report.content"  type="textarea" :rows="5" :readonly="report.status > 3"></el-input>
          </el-form-item>
          <el-form-item label="四、本课题研究方案" prop="scheme">
            <el-input class="input" v-model="report.scheme"  type="textarea" :rows="5" :readonly="report.status > 3"></el-input>
          </el-form-item>
          <el-form-item label="五、研究目标、主要特色及工作进度" prop="aim">
            <el-input class="input" v-model="report.aim"  type="textarea" :rows="5" :readonly="report.status > 3"></el-input>
          </el-form-item>
          <el-form-item label="六、参考文献" prop="reference">
            <el-input class="input" v-model="report.reference"  type="textarea" :rows="5" :readonly="report.status > 3"></el-input>
          </el-form-item>
          <el-form-item label="七、添加开题报告附件">
            <el-upload ref="upload" action="#" :auto-upload="false" :multiple="false" :limit="1" :file-list="fileList" 
              :on-remove="handleRemove" :before-upload="beforeUploadFile" :http-request="handleUpload" accept=".doc,.pdf,.docx">
              <el-button size="small" type="primary" v-if="report.status < 3">点击上传<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-upload> 
          </el-form-item>
          <el-form-item v-if="report.status !== 4">
            <el-button :type="buttonType" round @click.native="submitReport('reportFormRef')" style="margin-left:40%; margin-top:20px" icon="el-icon-s-promotion">{{buttonText}}</el-button> 
          </el-form-item>
        </el-form>
      </el-card>
    </el-card>
  </div>
</template>

<script>  
  import {getStudentReportVo, updateStudentReport} from '../../axios/report'
  import {uploadFile} from '../../axios/upload'
  import {compareDate} from '../../js/time'
  import {userGetDeadline} from '../../axios/time'
  export default { 
    name: 'StudentOpenReport',
    data() { 
      return { 
        deadline: {},
        buttonType: 'primary',
        buttonText: '提交开题报告',
        showPage: true,
        fileList: [], // 上传的文件信息
        // 开题报告信息
        report:{
          // basis: '', // 研究背景和意义
          // trend: '',  // 发展现状和趋势
          // content: '', // 研究内容
          // scheme: '', // 研究方案
          // aim: '', // 研究目标
          // reference: '', // 参考文献
          // filename: '', // 附件名称
          // attachment: '' // 附件地址
        },
        // 表单验证规则
        reportFormRules:{
          basis: [ { required: true, message: '课题研究背景和意义不能为空!', trigger: 'blur' } ],
          trend: [ { required: true, message: '课题国内外研究现状及发展趋势(含文献综述)不能为空!', trigger: 'blur' } ],
          content: [  { required: true, message: '课题研究内容不能为空!', trigger: 'blur' } ],
          scheme: [  { required: true, message: '课题研究方案不能为空!', trigger: 'blur' } ],
          aim: [ { required: true, message: '研究目标、主要特色及工作进度不能为空!', trigger: 'blur' } ],
          reference: [ { required: true, message: '参考文献不能为空!', trigger: 'blur' } ], 
        },  
        subject: {type:{}, source:{}}, // 获取学生所选课题信息 
        teacher: {}, // 学生指导老师信息 
      }
    },
    methods:{
      // 获取学生已选课题、指导老师、开题报告信息
      getReportSubjectTeacherData(){ 
        getStudentReportVo().then(res => {
          if(res.success){ 
            if(res.data === null) {
              this.showPage = false
              return 
            }
            this.report = res.data.report
            this.subject = res.data.subject
            this.teacher = res.data.teacher 
            if(this.report.status === 2 || this.report.status === 3) {
              this.buttonText = '修改开题报告'
              this.buttonType = 'success'
            } 
            if(this.report.attachment !== null){
              const file = {
                name: this.report.filename,
                url: this.report.attachment
              }
              this.fileList.push(file)
            } 
            if(this.report.status === 2){
              this.$notify.warning({
                title: '等待教师审核!', 
              });
            }
            if(this.report.status === 3){
              this.$notify.error({
                title: '审核不通过，请重新提交!',
                message: this.report.reviewAdvice, 
              });
            }
            if(this.report.status === 4){
              this.$notify.success({
                title: '审核通过!',
                message: this.report.reviewAdvice, 
              });
            }
          } 
        })  
      },  
      beforeUploadFile(file){
        const isPdf = file.type === "application/pdf"
        const isDoc = file.type === "application/msword" 
        const isDocx = file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        const isLimit10M = (file.size / 1024 / 1024 < 10)
        if(!isPdf && !isDoc && !isDocx){
          this.$message.error("上传文件类型只能是.doc,.pdf,.docx!")
          return false;
        }
        if(!isLimit10M){
          this.$message.error("上传文件大小必须在 10M 以内!")
          return false;
        }
        return true; 
      },
      handleRemove(file){
        this.$message.info('成功移除文件: ' + file.name)
        this.report.attachment = null
        this.fileList = []
      },
      handleUpload(file){
        console.log(file)
        const form = new FormData();
        form.append("file", file.file);
        uploadFile(form).then(res => {
          if(res.success){
            this.report.filename = res.data.filename
            this.report.attachment =  res.data.url 
            this.submitStudentReport(this.report)   // 文件上传成功之后，提交学生开题报告信息
          }
        })
      },
      // 提交开题报告
      submitReport(reportFormRef){ 
        if(this.deadline.openReport !== null){
          if(!compareDate(this.deadline.openReport)){
            this.$message.error('开题报告提交时间已截止!')
            return ;
          }
        } 
        console.log(this.$refs.upload.uploadFiles.length) 
        this.$refs[reportFormRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {
              // 此时才上传文件
              if(this.$refs.upload.uploadFiles.length === 1 && this.report.attachment === null){
                this.$refs.upload.submit() 
              }else{
                this.submitStudentReport(); // 没有文件上传，直接提交
              } 
            }) 
          }else{
            this.$message.error('请按要求填写各项信息!')
          } 
        })
      },
      submitStudentReport(){
        // 提交学生的开题报告信息
        updateStudentReport(this.report).then(res => {
          if(res.success){
            this.$message.success('提交开题报告成功!')
            this.$router.go(0)
          } 
        })
      }
    },
    created(){
      this.getReportSubjectTeacherData()  
      userGetDeadline().then(res => {
        if(res.success) this.deadline = res.data
      })
    }
  } 
</script>

<style scoped>  
  .report, .collapse, .item{
    margin: 0 88px
  }
  .right{
    float: right;
    margin-right: 100px
  }
  .item{
    margin-top: 10px;
  }
</style>